<script setup lang="ts">
import {onActivated, ref} from 'vue'
import {getUserLevelListApi, updatedUserLevelApi, createdUserLevelApi} from "@/apps/admin/api/user/level";
import {TableColumn} from "@/components/AppTable/TableType";
import {usePopupForm} from "@/components/FunctionComponents";

/**
 * 会员等级数据
 */
const level = ref<any[]>([])


/**
 * 获取用户会员等级数据
 */
async function getUserLevelList() {
  const {code, data} = await getUserLevelListApi({})
  if (code === 200) {
    level.value = data
  }
}

const columns: Array<TableColumn> = [
  {prop: 'id', label: 'ID', width: 80, fixed: 'left'},
  {prop: 'name', label: '名称', width: 170, fixed: 'left'},
  {type: 'action', label: '操作', width: 100, align: 'center', fixed: 'left'},
  {prop: 'desc', label: '描述/备注', minWidth: 180},
  {prop: 'status', label: '状态', width: 100, type: 'status'},
  {prop: 'created_at', label: '添加时间', type: 'timestramp', width: 170},
  {prop: 'updated_at', label: '上次编辑', type: 'timestramp', width: 170},
]

/**
 * 编辑会员等级
 */
function updatedTags(id: number) {
  usePopupForm({
    api: updatedUserLevelApi,
    width: "400px",
    query: {id},
    onSuccess: getUserLevelList
  })
}


/**
 * 编辑会员等级
 */
function createdTags() {
  usePopupForm({
    api: createdUserLevelApi,
    width: "400px",
    onSuccess: getUserLevelList
  })
}


/**
 * 删除会员等级
 */
function deleteTags(id: number) {

}

onActivated(getUserLevelList)
</script>
<template>
  <data-card title="用户会员等级">
    <template #right>
      <el-button type="primary" size="small" @click="createdTags">添加</el-button>
    </template>
    <app-interval/>
    <app-table height="calc(var(--ach) - 85px)" :columns :data="level">
      <template #action="{ row }">
        <el-space>
          <operate-link @tap="updatedTags(row.id)">
            编辑
          </operate-link>
          <operate-link @tap="deleteTags(row)" confirm="确定要删除此会员等级吗">
            删除
          </operate-link>
        </el-space>
      </template>
    </app-table>
  </data-card>
</template>